<style lang="scss" scoped>
.databox-container {
    background-color: #fff;
    padding: 34rpx 45rpx 34rpx 23rpx;
    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.1);
    border-radius: 5rpx;

    .databox-title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 21rpx;
        align-items: center;

        .title-right {
            font-size: 28rpx;
            font-weight: bold;

            .status1 {
                color: $uni-error;
            }

            .status2 {
                color: $uni-warning;
            }

            .status3 {
                color: $uni-success;
            }
        }

        .title-left {
            display: flex;
            align-items: center;

            .title-image {
                width: 33rpx;
                height: 33rpx;
                margin-right: 20rpx;
            }

            .title-title {
                font-size: 32rpx;
                font-weight: bold;
                margin-right: 24rpx;
            }

            .title-level {
                font-size: 24rpx;
                padding: 2rpx 11rpx;
                border: 2rpx solid #ccc;
                border-radius: 5rpx;
            }

            .level1 {
                color: $uni-error;
                border-color: $uni-error;
            }

            .level2 {
                color: $uni-warning;
                border-color: $uni-warning;
            }

            .level3 {
                color: $uni-success;
                border-color: $uni-success;
            }

        }
    }

    .databox-address {
        margin-bottom: 21rpx;
        font-size: 26rpx;
        color: $main-text-remind;
        padding-left: 53rpx;
    }

    .databox-date {
        font-size: 26rpx;
        color: $main-text-remind;
        padding-left: 53rpx;
    }
	.flex {
		display: flex;
	}
	.flex-between {
		justify-content: space-between;
	}
}
</style>

<template>
    <view class="databox-container" @tap='toChecked(data)'>
        <view class="databox-title">
            <view class="title-left">
                <image class="title-image" src="/static/firstpage/info-icon.png"></image>
                <view class="title-title">
                    {{ data.title || data.eventName }}
                </view>
                <view class="title-level" :class="levelDict[data.level||data.eventLevel].class">
                    {{ levelDict[data.level||data.eventLevel].name }}
                </view>
            </view>
            <view class="title-right">
                <view :class="statusDict[data.status||data.eventStatus].class">
                    {{ statusDict[data.status||data.eventStatus].name }}
                </view>
            </view>
        </view>
        <view class="databox-address flex flex-between">
			<label>地址：{{ data.address || data.eventAddress }}</label>
			<label v-if="data.windowTypeName">专区：{{data.windowTypeName || '-'}}</label>
		</view>
        <view class="databox-date flex flex-between">
			<label>时间：{{ data.date || data.eventStartDate }}</label>
			<label v-if="data.windowName">窗口：{{data.windowName || '-'}}</label>
		</view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
    data: {
        type: Object,
        default: {}
    },
	tap: {
		type: Boolean,
		default: true
	}
})
const statusDict = ref({
    '待核实': { name: '待核实', class: 'status1' },
    '待处置': { name: '待处置', class: 'status2' },
    '已完成': { name: '已完成', class: 'status3' }
})
const levelDict = ref({
    '一级': { name: '一级', class: 'level1' },
    '二级': { name: '二级', class: 'level2' },
    '三级': { name: '三级', class: 'level3' }
})
const toChecked = (item) => {
	if (props.tap) {
		uni.navigateTo({
			url: '/pages/warnDetail/index?id='+item.caseInfoOid
		})
	}
}
</script>